<script lang='ts' setup>
import { ToolInfo } from "@/models/tool";
import { appRef } from "@/models/app.ref";
import { ref, defineProps, onUnmounted, onMounted } from "vue";
import Edit from "@/components/tool/Edit.vue";
import router from "@/router";
import { toolService } from "@/services/tool.service";
import { UserRole } from "@/models/user";

const tools = ref([] as ToolInfo[]);
const currTool = ref({} as ToolInfo);
const types = ref([]);
const type = ref("");
const isCreated = ref(false);

onMounted(() => {
  toolService.list().then(() => {
    getTools();
  });
});

function getTools(): void {
  types.value = appRef.tool.types;
  type.value = appRef.tool.types[0];
  tools.value = appRef.tool.list.filter((val) => val.type === type.value);
}

function onCard(val: ToolInfo): void {
  console.log(val);
  if (val.href?.includes("http")) {
    window.open(val.href);
  } else {
    router.push(val.href);
  }
}
function onCollection(val: ToolInfo): void {
  console.log("收藏", val);
}
function onEdit(val: ToolInfo = {} as ToolInfo): void {
  currTool.value = val;
  isCreated.value = true;
}
function onEditClose(val: boolean): void {
  if (val) {
    getTools();
  }
  isCreated.value = false;
}

const onChang = (value: string) => {
  type.value = value;
  tools.value = appRef.tool.list.filter((val) => val.type === type.value);
};
</script>
<template>
  <div class="index">
    <t-tabs drag-sort :value="type" @change="onChang">
      <t-tab-panel v-for="data in types" :key="data" :value="data" :label="data"> </t-tab-panel>
    </t-tabs>
    <div class="group grid">
      <div class="card" v-for="item in tools" @click="onCard(item)">
        <div class="top flex">
          <div class="left flex">
            <div class="icon flex">
              <img :src='item.logo' />
            </div>
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
          </div>
          <!-- 收藏功能 等待后续实现 -->
          <!-- <span class="star" @click.stop="onCollection(val)">
                  <t-popup content="收藏">
                    <t-rate :count="1"> </t-rate>
                  </t-popup>
                </span> -->
          <span class="star" @click.stop="onEdit(item)" v-if="appRef.user?.data?.uid === item.user?.uid">
            <t-icon name="edit" />
          </span>
        </div>
        <t-tag>
          <template #icon>
            <t-icon name="discount" />
          </template>
          {{ item.type }}
        </t-tag>
        <div class="remark">{{ item.remark }}</div>
      </div>
    </div>

    <div class="suspension-btn" v-if="appRef.user?.data?.role === UserRole.Root">
      <div class="add-circle flex" @click="onEdit()">
        <t-icon class="icon" name="add-circle" size="20" />添加
      </div>
    </div>

    <Edit :visible="isCreated" @close="onEditClose" :tool="currTool"></Edit>
  </div>
</template>
<style lang='scss' scoped>
.index {
  width: 100%;
  padding: 30px;

  .group {
    margin-top: 17px;

    @media screen and (max-width: 600px) {
      grid-template-columns: repeat(1, 1fr);
    }

    @media screen and (min-width: 600px) and (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(4, 1fr);
    }

    .card {
      width: initial;
      box-shadow: 0 0 5px #cccccc;
      border-radius: 7px;
      padding: 20px;
      cursor: pointer;

      &:hover {
        animation: shadowAnimotion 2s infinite linear;
        transform: translateY(-1px);
      }

      @keyframes shadowAnimotion {
        0% {
          box-shadow: 0 0 5px #a0a0a0;
        }

        50% {
          box-shadow: 0 0 15px #81818156;
        }

        100% {
          box-shadow: 0 0 5px #a0a0a0;
        }
      }

      .top {
        justify-content: space-between;

        .icon {
          width: 70px;
          height: 70px;
          margin: 0 10px 10px 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 7px;
          }
        }

        .title {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 7px;
        }

        .star {}
      }

      .remark {
        margin-top: 7px;
        font-size: 15px;
        color: #666;
      }
    }
  }

  .suspension-btn {
    position: fixed;
    right: 0;
    bottom: 10%;

    .add-circle {
      border-radius: 50px 0 0 50px;
      box-shadow: 0 0 7px #457b9d31;
      color: #1d3557;
      font-size: 15px;
      padding: 5px 10px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 10px;

      &:hover {
        box-shadow: 0 0 7px #457b9dbe;
        transform: translateY(-1px);
      }

      .icon {
        font-size: 27px;
        margin-right: 3px;
      }
    }
  }
}
</style>